<template>
    <div >
        <van-nav-bar
                title="我的地址"
                left-text="返回"
                :fixed="fixed"
                left-arrow
                @click-left="onClickLeft"
        />
        <!--<div class="address">--
            <!-//没有地址显示-
            <img src="https://static.home.mi.com/youpin/static/m/res/images/std_shop_details_icon_wrong.png" />-->
            <!--<p>您还没有收货地址，请点击下方+新建</p>-->
        <!--</div>-->
        <!--<div>-->
            <!--<mt-button type="default" class="button" @click="onclick">+ 添加地址</mt-button>-->
        <!--</div>-->
        <div  :style="{marginTop:'46px'}">
            <van-address-list
                    v-model="chosenAddressId"
                    :list="list"
                    @add="onAdd"
                    @edit="onEdit"
            />
        </div>
    </div>
</template>

<script>
    import { AddressList,NavBar } from 'vant';
    import Vue from  'vue'
    import { Toast } from 'vant';
    Vue.use(AddressList,NavBar,Toast);
    import {UserAddressList} from "../api/data";
    export default {
      data() {
          return {
              fixed:true,
              chosenAddressId: '',
              list: [
              ]
          }
      },

      methods: {
          onAdd() {
              this.$router.push({
                          path:`/newaddress`
              })
          },

          onEdit(item, index) {
              this.$router.push({
                  path:`/edit`,
                  query:{editid:item.id}
              })
              console.log(item.id)
          },
          onClickLeft() {
             this.$router.push({path:`/me`})
          }
      },
      created(){
          UserAddressList().then(res=>{
              console.log(res.data)
              if (res.data.code == '10001') {
                  Toast('登录已失效，请重新登录！')
                  this.$router.push({path:`/login`})
                  localStorage.removeItem('token')
                  return
              }
              this.chosenAddressId=res.data.data.data[0].id
              for (var i=0;i<res.data.data.data.length;i++){
                  // console.log(res.data.data.data[i])
                  var data=[]
                   data['id'] = res.data.data.data[i].id
                   data['name']=res.data.data.data[i].name
                   data['tel'] =res.data.data.data[i].phone
                   data['address'] = res.data.data.data[i].province+res.data.data.data[i].district+res.data.data.data[i].city+res.data.data.data[i].address
                  this.list.push(data)
              }
          })
      }

  }
</script>

<style scoped>
    .button{
        width: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .address{
        font-size: 16px;
        color:  rgb(153, 153, 153);
        margin-top: 60px;
        text-align: center;
    }
    .title{
        border-bottom: 1px solid #BFBFC0;
    }
</style>
